<template>
  <div class="chat">
    <van-nav-bar
      title="小智同学"
      left-arrow
      @click-left="$router.back()"
      class="btn"
    />
    <van-cell
      title="单元格"
      value="内容"
      v-for="(item, index) in 15"
      :key="index"
      class="chat_message_list"
    />

    <van-cell-group class="chat_send_wrap">
      <van-field v-model="value" placeholder="请输入信息" />
      <van-button type="primary" size="small">发送</van-button>
    </van-cell-group>
  </div>
</template>

<script>
import io from "socket.io-client";

export default {
  data() {
    return {
      value: 12,
      socket: null
    };
  },
  created() {
    const socket = io("http://ttapi.research.itcast.cn/");
    this.socket = socket;

    this.socket.on("connect", function() {
      console.log("建立链接");
    });

    this.socket.on("disconnect", function() {
      console.log("断开链接");
    });
  }
};
</script>

<style lang="less" scoped>
.chat {
  .btn {
    background-color: #3097fb;
    /deep/.van-nav-bar__content {
      .van-nav-bar__left {
        color: white;
      }
      .van-nav-bar__title van-ellipsis {
        color: white;
      }
    }
  }
  .chat_message_list {
    position: fixed;
    left: 0;
    right: 0;
    top: 45px;
    bottom: 44px;
    overflow-y: auto;
  }
  .chat_send_wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 15px;
    // background-color: violet;
  }
}
</style>